<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    li{
      height: 100px;
      width: 200px;
    }
  </style>
</head>
<body>

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <img class="imgLazyLoad" data-src="images/1.jpg" />
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <img class="imgLazyLoad" data-src="images/2.jpg" />
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <img class="imgLazyLoad" data-src="images/3.jpg" />
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <img class="imgLazyLoad" data-src="images/4.jpg" />
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <img class="imgLazyLoad" data-src="images/5.jpg" />
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>


</body>
</html>

<script src="jq/jquery-1.12.2.js"></script>
<script>
  (function(){   //立即执行函数
    var imgList = [];  //保存所有图片节点的数组
    var delay;   //保存的是setTimeout生成的引用
    var time = 800;   //控制防抖函数延迟执行的时间
    var offset = -300;   //设置图片距离可视区域多远则立即加载的偏差值
    function _delay(){   //函数节流
      clearTimeout(delay);
      delay = setTimeout(_loadImg,time);
    };
    function _loadImg(){   //执行图片加载
      for(var i = 0,len = imgList.length; i < len; i++){
        if(_isShow(imgList[i])){
          imgList[i].src = imgList[i].getAttribute('data-src');
          imgList.splice(i,1);
        }
      }
    };
    function _isShow(el){   //判断img是否出现在可视窗口
      var coords = el.getBoundingClientRect();
      return (coords.left >= 0 && coords.top) <= (document.documentElement.clientHeight || window.innerHeight) + parseInt(offset);
    };
    function imgLoad(selector){   //获取所有需要实现懒加载图片对象引用并设置window监听事件scroll
      _selector = selector || '.imgLazyLoad';
      var nodes = document.querySelectorAll(selector);
      imgList = Array.apply(null,nodes);
      window.addEventListener('scroll',_delay,false)
    };
    imgLoad('.imgLazyLoad')
  })()
</script>
